<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">新增</el-button>
      <el-button size="mini"  class="filter-item" type="primary" icon="el-icon-download"><a href="https://mdimage.czttao.com/mdimage/other/2022/7/2022-07-12/1657611706888_046.xls">导入模板下载</a></el-button>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreateExcelStudent">导入学员信息</el-button>
      <el-button size="mini" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出学员信息</el-button>
      <br>
      <!-- 课程类型 -->
      <div class="filter-container">
        <!--课程类型：-->
        <el-tag
          v-for="(tag,index) in tags"
          :key="tag.name"
          :class="bgindex === index?'active':''"
          style="cursor: pointer;margin-right: 10px"

          @click.native="tagclick(tag.cid,index)">
          {{ tag.name }}
        </el-tag>
      </div>
      <div style="display: flex;">

         <el-input size="mini" v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入姓名"/>
         <el-input size="mini" v-model="listQuery.phone" clearable class="filter-item" style="width: 200px;" placeholder="电话"/>
         <el-input size="mini" v-model="listQuery.idCard" clearable class="filter-item" style="width: 200px;" placeholder="身份证"/>
         <!--<br>-->
         <el-select size="mini" v-model="listQuery.payStatus" clearable class="filter-item" placeholder="是否缴费" >
           <el-option :value="0" label="未缴费"/>
           <el-option :value="1" label="已缴费"/>
         </el-select>
         <el-select size="mini" v-model="listQuery.certificateStatus" clearable class="filter-item" placeholder="是否已获证">
           <el-option :value="0" label="未获得"/>
           <el-option :value="1" label="已获得"/>
         </el-select>
        <el-select size="mini" v-model.trim="listQuery.courseStatus" style="width: 120px;margin-left: 10px;"
          clearable class="filter-item" placeholder="是否已学完">
          <el-option :value="0" label="未学完" />
          <el-option :value="1" label="已学完" />
        </el-select>
        <!-- <el-select v-model="listQuery.studentsType" clearable class="filter-item" placeholder="人员类型">
           <el-option :value="1" label="主要负责人"/>
           <el-option :value="2" label="管理人员"/>
           <el-option :value="3" label="从业人员"/>
         </el-select>
         <el-select v-model="listQuery.trainType" clearable class="filter-item" placeholder="培训类型">
           <el-option :value="1" label="新取证"/>
           <el-option :value="2" label="继续教育"/>
         </el-select>-->
         <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      </div>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" highlight-current-row @selection-change="handleBatchStudentOrderChange">
      <el-table-column type="selection" label="选择" width="45px" />
      <el-table-column align="center" label="姓名" prop="name" width="100px"/>
      <el-table-column align="center" label="电话号码" prop="phone"width="150px"/>
      <el-table-column align="center" label="身份证" prop="idCard" width="200px"/>
      <el-table-column align="center" label="企业名称" prop="companyName" width="100px"/>

      <el-table-column align="center" label="费用" prop="price" width="120px"/>
      <el-table-column align="center" label="已播放学时(时:分:秒)" prop="duration" width="150px"/>
      <el-table-column align="center" label="总学时(时:分:秒)" prop="totalDuration" width="150px"/>
      <el-table-column align="center" label="学时" prop="studyTime" width="120px"/>

<!--      <el-table-column align="center" label="学时" prop="courseType">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.courseType===1" type="primary">16小时</el-tag>
          <el-tag v-if="scope.row.courseType===2" type="primary">8小时</el-tag>
          <el-tag v-if="scope.row.courseType===3" type="success">16小时</el-tag>
          <el-tag v-if="scope.row.courseType===4" type="success">8小时</el-tag>
          <el-tag v-if="scope.row.courseType===5" type="info">8小时</el-tag>
          <el-tag v-if="scope.row.courseType===6" type="info">4小时</el-tag>
        </template>
      </el-table-column>-->

     <!-- <el-table-column align="center" label="缴费情况" prop="payStatusString"/>
      <el-table-column align="center" label="取证情况" prop="certificateStatusString"/>-->

      <el-table-column align="center" label="缴费情况" prop="payStatus" width="120px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payStatus===0" type="info">未缴费</el-tag>
          <el-tag v-if="scope.row.payStatus===1" type="success">已缴费</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="取证情况" prop="certificateStatus" width="120px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.certificateStatus===0" type="info">未取证</el-tag>
          <el-tag v-if="scope.row.certificateStatus===1" type="success">已取证</el-tag>
        </template>
      </el-table-column>


     <!-- <el-table-column align="center" label="人员类型" prop="studentsType" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.studentsType===1" type="primary">主要负责人</el-tag>
          <el-tag v-if="scope.row.studentsType===2" type="success">管理人员</el-tag>
          <el-tag v-if="scope.row.studentsType===3" type="info">从业人员</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="培训类型" prop="courseType">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.courseType===1||scope.row.courseType===3||scope.row.courseType===5" type="primary">新取证</el-tag>
          <el-tag v-if="scope.row.courseType===2||scope.row.courseType===4||scope.row.courseType===6" type="success">继续教育</el-tag>
        </template>
      </el-table-column>-->


      <!--<el-table-column align="center" label="匹配课程" prop="courseType" width="180px">-->
        <!--<template slot-scope="scope">-->
          <!--<el-tag v-if="scope.row.courseType===1" type="primary">主要负责人新取证</el-tag>-->
          <!--<el-tag v-if="scope.row.courseType===2" type="primary">主要负责人继续教育</el-tag>-->
          <!--<el-tag v-if="scope.row.courseType===3" type="success">管理人员新取证</el-tag>-->
          <!--<el-tag v-if="scope.row.courseType===4" type="success">管理人员继续教育</el-tag>-->
          <!--<el-tag v-if="scope.row.courseType===5" type="info">从业人员新取证</el-tag>-->
          <!--<el-tag v-if="scope.row.courseType===6" type="info">从业人员继续教育</el-tag>-->
        <!--</template>-->
      <!--</el-table-column>-->

      <!--<el-table-column align="center" label="章节名称" prop="zhangJieName"/>-->
      <el-table-column align="center" label="章节名称" prop="zhangJieName">
        <template slot-scope="scope">
            <div class="zhangjie-span">{{ scope.row.zhangJieName }}</div>
        </template>
      </el-table-column>

      <!--<el-table-column align="center" label="创建时间" prop="createDate"/>-->
      <el-table-column align="center" label="操作" width="200px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleCertificate(scope.row)">查询证书</el-button>
          <el-button type="success" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <!--<el-button  type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-button class="filter-item" type="success" icon="el-icon-edit" @click="batchStudentOrderUpdate">批量缴费</el-button>
    <el-button class="filter-item" type="success" icon="el-icon-edit" @click="queryPayStatusAll">全部缴费</el-button>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="学员姓名" prop="name">
          <el-input v-model="dataForm.name"/>
        </el-form-item>
        <!--<el-form-item label="昵称" prop="nickName">-->
        <!--<el-input v-model="dataForm.nickName"/>-->
        <!--</el-form-item>-->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="dataForm.phone" type="number"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="dataForm.gender" clearable placeholder="请选择">
            <el-option :value="1" label="男"/>
            <el-option :value="2" label="女"/>
          </el-select>
        </el-form-item>

        <!--<el-form-item label="生日" prop="birthday">-->
          <!--<el-date-picker-->
            <!--v-model="dataForm.birthday"-->
            <!--type="date"-->
            <!--placeholder="选择日期"-->
            <!--format="yyyy 年 MM 月 dd 日"-->
            <!--value-format="yyyy-MM-dd"/>-->
        <!--</el-form-item>-->
        <el-form-item label="身份证" prop="idCard"  @change="chosePwd">
          <el-input v-model="dataForm.idCard"/>
        </el-form-item>
        <el-form-item label="学员密码" prop="lognPasswd">
          <el-input v-model="dataForm.lognPasswd"/>
        </el-form-item>
        <el-form-item label="学员类型" prop="studentsType"  v-if="selectTF">
          <el-select v-model="dataForm.studentsType"  @change="selectItem" clearable placeholder="请选择">
            <el-option :value="1" label="主要负责人"/>
            <el-option :value="2" label="管理人员"/>
            <el-option :value="3" label="从业人员"/>
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型" prop="courseType" v-if="selectTF">
          <el-select v-model="dataForm.courseType"  clearable placeholder="请选择">
            <el-option :value="1" v-show="seclectType==1" label="主要负责人新取证"/>
            <el-option :value="2" v-show="seclectType==1" label="主要负责人继续教育"/>
            <el-option :value="3" v-show="seclectType==2" label="管理人员新取证"/>
            <el-option :value="4" v-show="seclectType==2" label="管理人员继续教育"/>
            <el-option :value="5" v-show="seclectType==3" label="从业人员新取证"/>
            <el-option :value="6" v-show="seclectType==3" label="从业人员继续教育"/>
          </el-select>
        </el-form-item>
        <el-form-item label="学员类型" prop="studentsType"  v-if="!selectTF">
          <el-select v-model="dataForm.studentsType" disabled @change="selectItem" clearable placeholder="请选择">
            <el-option :value="1" label="主要负责人"/>
            <el-option :value="2" label="管理人员"/>
            <el-option :value="3" label="从业人员"/>
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型" prop="courseType" v-if="!selectTF">
          <el-select v-model="dataForm.courseType" disabled clearable placeholder="请选择">
            <el-option :value="1" v-show="seclectType==1" label="主要负责人新取证"/>
            <el-option :value="2" v-show="seclectType==1" label="主要负责人继续教育"/>
            <el-option :value="3" v-show="seclectType==2" label="管理人员新取证"/>
            <el-option :value="4" v-show="seclectType==2" label="管理人员继续教育"/>
            <el-option :value="5" v-show="seclectType==3" label="从业人员新取证"/>
            <el-option :value="6" v-show="seclectType==3" label="从业人员继续教育"/>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="学员地址" prop="address">-->
        <!--<el-input v-model="dataForm.address"/>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
        <el-button size="mini" v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

    <!-- 预览对话框 -->
    <div  class="certificate-fixed" >
      <el-dialog :visible.sync="dialogFormVisibleCertificate" :close-on-click-modal="false" title="">
      <div class="certificate-div" ref="imageDom">
        <h1 class="certificate-h1">{{ queryCertDataForm.certName }}</h1>
        <h2 class="certificate-h2">证书编号{{ queryCertDataForm.certCode }}</h2>
        <p class="certificate-p">{{ queryCertDataForm.certContent }}</p>
        <div class="certificate-flex">
          <div class="certificate-div1">
           <!-- <img src="../../assets/images/certificate/ewm.png" alt="">
            <img :src="queryCertDataForm.certUrl" alt="">
            <p class="certificate-p1">扫描二维码查看</p> -->
          </div>
          <div class="certificate-div2">
            <img src="../../assets/images/certificate/zhang.png" alt="">
            <p class="certificate-p1">贵州明德工程咨询有限公司培训中心</p>
            <p class="certificate-p2">{{queryCertDataForm.createTime}}</p>
          </div>
        </div>

      </div>
      <div class="certificate-div3" @click="clickGeneratePicture()">
        生成图片
      </div>
      <div class="certificate-div4" @click="saveTF=false" v-if="saveTF">
        <h1>右键点击图片保存</h1>
        <img :src="imgUrl" alt="">
      </div>
    </el-dialog>
    </div>


    <!-- 导入学员信息-->
    <el-dialog :visible.sync="createDialogVisible1" :close-on-click-modal="false" title="导入用户信息">
      <el-upload
        :show-file-list="true"
        :limit="5"
        :multiple="true"
        :http-request="handleUploadStudent"
        action="#"
        list-type="picture">
        <el-button size="mini" type="primary">点击导入</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<style>
  .certificate-fixed .el-dialog{
    width: 500px;

  }
  .zhangjie-span{
    width: 100%;
    white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
  }
  .certificate-div3{
    width: 80%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#20a0ff;
    color: #fff;
    font-size: 16px;
    margin:0 auto;
    margin-top: 20px;
    border-radius: 5px;
  }
  .certificate-div4{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,.6);
    z-index: 999;
  }
  .certificate-div4 img{
    width: 400px;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

  }
  .certificate-div4 h1 {
    color: #fff;
    font-weight: 500;
    width: 100%;
    margin-top: 30px;
    text-align: center;

  }
  .certificate-div{
    width:400px;
    display: block;
    margin:0 auto;
    height: 551px;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/certificate/bgcer.png);
    background-size: 100% auto;
  }
  .certificate-div .certificate-h1{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding-top: 80px;
  }
  .certificate-div .certificate-h2{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
  }
  .certificate-div .certificate-p{
    text-align: left;
    padding:0 30px;
    line-height: 26px;
    font-size: 14px;
    margin-top:30px;
  }
  .certificate-flex{
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
  }
  .certificate-div1{
    width:118px;
    margin-left: 32px;
  }
  .certificate-div1 img{
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  .certificate-div1 p{
    text-align: center;
  }
  .certificate-div2{
    width: 144px;
    position: relative;
    margin-right: 40px;
    height: 136px;
  }
  .certificate-div2 img{
    width:85%;
    position: absolute;
    right: 0;
    top:0;
  }
  .certificate-div2 .certificate-p1{
    position: absolute;
    bottom: 30px;
    right:0;
  }
  .certificate-div2 .certificate-p2{
    position: absolute;
    bottom: 0px;
    right:0;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .active{
    background-color: #1e6abc;
    color: white;
  }
  .certDiv{
    margin-bottom: 20px;
    font-size: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>

<script>
import html2canvas from "html2canvas"
import { listCompanyStudent, createCompanyStudent, updateCompanyStudent, queryPayStatustCompanyStudent, importStudents, queryCert } from '@/api/companyOperate'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'CompanyOrder',
  components: { Pagination },
  data() {
    return {
      selectTF:true,
      saveTF:false,
      uploadPath,
      completeInfo: undefined,
      createDialogVisible1: false,
      updateParam: undefined,
      list: undefined,
      total: 0,
      listLoading: true,
      listQuery: {
        id: undefined,
        companyId: undefined,
        name: undefined,
        phone: undefined,
        companyName: undefined,
        idCard: undefined,
        payStatus: undefined,
        certificateStatus: undefined,
        trainType: undefined,
        studentsType: undefined,
        courseType: undefined,
        page: 1,
        limit: 10,
        sort: 'id',
        order: 'desc'
      },
      queryCertParam: {
        studentsId: undefined,
      },
      queryCertDataForm:{
        certName:'',
        certCode:'',
        certContent:'',
        certCert:'',
        cteateTime:'',
        companyName:''
      },
      queryPayStatus: {
        payStatus: 0
      }, // 未缴费
      dataForm: {
        id: undefined,
        companyId: undefined,
        companyName: undefined,
        name: undefined,
        nickName: undefined,
        phone: undefined,
        iconUrl: undefined,
        gender: undefined,
        birthday: undefined,
        idCard: undefined,
        associatedIndustryId: undefined,
        payStatus: undefined,
        certificate: undefined,
        certificateStatus: undefined,
        studentsType: undefined,
        courseType: undefined,
        address: undefined,
        deleteMark: undefined,
        createDate: undefined,
        studentsId: undefined,
        lognPasswd: undefined,
        certName: undefined,
        certCode: undefined,
        certContent: undefined,
        certUrl: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      imgUrl:'',
      rules: {
        name: [
          { required: true, message: '学员姓名不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '学员电话不能为空', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '学员身份证不能为空', trigger: 'blur' }
        ],
        studentsType: [
          { required: true, message: '学员类型不能为空', trigger: 'blur' }
        ],

        // lognPasswd: [
        //   { required: true, message: '学员登录密码不能为空', trigger: 'blur' }
        // ],
        courseType: [
          { required: true, message: '课程类型不能为空', trigger: 'blur' }
        ]

      },
      downloadLoading: false,
      seclectType:'',
      tags: [
        { name: '全部', cid: '' },
        { name: '主要负责人新取证', cid: 1 },
        { name: '主要负责人继续教育', cid: 2 },
        { name: '管理人员新取证', cid: 3 },
        { name: '管理人员继续教育', cid: 4 },
        { name: '从业人员新取证', cid: 5 },
        { name: '从业人员继续教育', cid: 6 }
      ],
      bgindex: -1,
      dialogFormVisibleCertificate: false,
      batchStudentOrderSelection: [],
      dialogFormVisibleBatchStudentOrder: undefined,
      starLevelStatus: undefined
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    timeUtil (time) {
      let timeStr = '';
      let stringFormat = (i) => {
          return i < 10 ? `0${i}` : `${i}`;
      }
      let minuteTime = 0;
      let secondTime = 0;
      let hourTime = 0;
      if(time < 60) {
          timeStr = `00:${stringFormat(time)}`
      } else if(time >= 60 && time < 3600) {
          minuteTime = parseInt(time / 60);
          secondTime = parseInt(time % 60);
          timeStr = `${stringFormat(minuteTime)}:${stringFormat(secondTime)}`;
      } else if(time >= 3600) {
          let _t = parseInt(time % 3600);
          hourTime = parseInt(time / 3600);
          minuteTime = parseInt(_t / 60);
          secondTime = parseInt(_t % 60);
          timeStr = `${stringFormat(hourTime)}:${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
      }
      return timeStr;
    },
    selectItem(type){
      this.seclectType = type;
      console.log(this.seclectType)
    },
    // 转成图片，生成图片地址
     clickGeneratePicture() {
      html2canvas(this.$refs.imageDom).then(canvas => {
        this.imgUrl = canvas.toDataURL("image/png");
        this.saveTF = true;
        console.log(this.imgUrl)
      });
    },
    // 标签类事件
    tagclick(cid, index) {
      if (this.bgindex === index) {
        this.bgindex = -1
        this.listQuery.courseType = ''
        this.getList()
      } else {
        this.bgindex = index
        this.listQuery.courseType = cid
        this.getList()
      }
    },
    // 初始化参数
    init: function() {
      this.getList()
    },
    getList() {
      this.listLoading = true
      if (this.listQuery.courseStatus === '') {
        this.listQuery.courseStatus = undefined
      }
      listCompanyStudent(this.listQuery)
        .then(response => {
          this.list = response.data.data.items.map(res => {
            return {
              ...res,
              duration: this.timeUtil(res.duration),
              totalDuration: this.timeUtil(res.totalDuration)
            }
          })
          this.completeInfo = response.data.data.object
          this.total = response.data.data.total
          this.listLoading = false
          this.completeInfoFun()
        })
        .catch(() => {
          this.list = []
          this.completeInfo = 0 // 未完善
          this.total = 0
          this.listLoading = false
        })
    },
    restCertDataForm(){
      this.queryCertDataForm={
        certName:'',
        certCode:'',
        certContent:'',
        certCert:'',
        cteateTime:'',
        companyName:''
      }
    },

    queryCert(){
      queryCert(this.queryCertParam)
        .then(response => {
          this.queryCertDataForm = response.data.data
          if (response.data.data===undefined){
            this.restCertDataForm()
          }
          this.listLoading = false

        })
        .catch(() => {
          // this.queryCertDataForm= undefined
          this.listLoading = false

        })
    },
    completeInfoFun() {
      if (this.completeInfo === 0) {
        this.$confirm('您的信息未完善, 是否跳转完善信息页面', '提示', {
          showClose: false,
          showCancelButton: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getCompleteInfo()
          this.$message({
            type: 'success',
            message: '跳转完善信息页面'
          })
        }).catch(() => {
          this.getCompleteInfo()
          // this.$message({
          //
          //   type: 'info',
          //   message: '跳转失败'
          // })
        })
      }
    },
    chosePwd(){
       this.dataForm.lognPasswd= this.dataForm.idCard.substring(this.dataForm.idCard.length-6)

    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        companyId: undefined,
        companyName: undefined,
        name: undefined,
        nickName: undefined,
        phone: undefined,
        iconUrl: undefined,
        gender: undefined,
        birthday: undefined,
        idCard: undefined,
        associatedIndustryId: undefined,
        payStatus: undefined,
        certificate: undefined,
        certificateStatus: undefined,
        studentsType: undefined,
        courseType: undefined,
        address: undefined,
        lognPasswd: "123456",
        deleteMark: undefined,
        createDate: undefined
      }
    },
    handleCreate() {
      this.selectTF = true
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    uploadPicUrl: function(response) {
      this.dataForm.invoiceUrl = response.data.url
    },
    uploadPicUrl1: function(response) {
      this.dataForm.payEvidence = response.data.url
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          createCompanyStudent(this.dataForm)
            .then(response => {
              this.list.unshift(response.data.data)
              this.getList()
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '创建成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.selectTF = false;
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updateCompanyStudent(this.dataForm)
            .then(() => {
              for (const v of this.list) {
                if (v.id === this.dataForm.id) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
        }
      })
    },
    handleCertificate(row) {
      // this.dataForm = Object.assign({}, row)
      this.queryCertParam.studentsId=row.id
      this.queryCert(this.queryCertParam)
      this.dialogFormVisibleCertificate = true
    },
    handleBatchStudentOrderChange(val) {
      this.batchStudentOrderSelection = val
    },
    batchStudentOrderUpdate() {
      if (this.batchStudentOrderSelection.length <= 0) {
        this.$confirm('当前没有批量缴费学员，请先勾选左侧栏多选框！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } else {
        // console.log( this.batchStudentOrderSelection[0].payStatus)
          for (var i =0; i<this.batchStudentOrderSelection.length;i++) {
            // console.log("+--------------------" +this.batchStudentOrderSelection[i].payStatus)
            if (this.batchStudentOrderSelection[i].payStatus == 1) {
              this.$confirm('有已缴费的学员请重新选择', '提示', {
                showClose: false,
                showCancelButton: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              return
            }
          }
        // this.dialogFormVisibleBatchStudentOrder = true
        // this.getStudentOrder() // 跳转订单页面
        this.$confirm('是否批量缴费?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getStudentOrder() // 跳转订单页面
          this.$message({
            type: 'success',
            message: '跳转批量缴费页面成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '跳转订单页面失败'
          })
        })
      }
    },
    queryPayStatusAll() {
      queryPayStatustCompanyStudent(this.queryPayStatus)
        .then(response => {
          this.batchStudentOrderSelection = response.data.data.items
        })
      this.$confirm('是否全部缴费（未缴费的学员）?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getStudentOrder() // 跳转订单页面
        this.$message({
          type: 'success',
          message: '跳转批量缴费页面成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '跳转订单页面失败'
        })
      })
        .catch(() => {
          this.list = []
        })
    },
    handleCreateExcelStudent() {
      this.createDialogVisible1 = true
    },
    handleUploadStudent(item) {
      const formData = new FormData()
      formData.append('file', item.file)

      importStudents(formData)
      // this.getList()
      // this.createDialogVisible1 = false
        .then(response => {
          if (response.data.data === 1) {
            this.$message.success('导入成功')
            this.getList()
            this.createDialogVisible1 = false
          }
        }).catch(response => {
          this.$message.error(response.data.message)
        })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号','姓名', '电话号码', '身份证', '费用', '学时','缴费情况','取证情况','匹配课程','章节名称']
        const filterVal = ['number','name', 'phone', 'idCard','price', 'studyTime','payStatusString','certificateStatusString','courseTypeInfoString','zhangJieName']
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '学员信息')
        this.downloadLoading = false
      })
    },
    getStudentOrder() {
      this.$router.push({ path: '/companyOperateManage/companyBatchOrder', query: { param: JSON.stringify(this.batchStudentOrderSelection) }})
    },
    getCompleteInfo() {
      this.$router.push({ path: '/companyOperateManage/completeInfo' })
    }
  }
}
</script>
